<template>
	<view>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map id='id' style="width: 100%; height: 1500rpx;" :latitude="latitude" :longitude="longitude"
					:markers="covers"  @tap='taps'>
				</map>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 0,
				longitude: 0,
				name:'',
				covers: [{
					id:0,
					latitude: 0,
					longitude: 0,
					width: 20,
					height: 20,
					iconPath: '../../static/lg_img/btn_location.png',
					callout: { //自定义标记点上方的气泡窗口 点击有效
						content: this.name, //文本
						color: '#ffffff', //文字颜色
						fontSize: 10, //文本大小
						borderRadius: 2, //边框圆角
						bgColor: '#5398f6', //背景颜色
						display: 'ALWAYS', //常显
					},
				}, {
					latitude: 0,
					longitude: 0,
					width: 20,
					height: 20,
					iconPath: '../../static/lg_img/btn_location.png',
					callout: { //自定义标记点上方的气泡窗口 点击有效
						content: this.name, //文本
						color: '#ffffff', //文字颜色
						fontSize: 10, //文本大小
						padding:10,
						borderRadius: 2, //边框圆角
						bgColor: '#5398f6', //背景颜色
						display: 'ALWAYS', //常显
					},
				}]
			};
		},
		onLoad(option) {
			const myData = JSON.parse(decodeURIComponent(option.data))
			this.latitude = myData.lo
			this.longitude = myData.la
			this.name=myData.name
			console.log(this.name,'this.name',myData);
			// console.log(this.latitude, this.longitude,myData.name)
			this.covers.map(item => {
				item.latitude = this.latitude
				item.longitude = this.longitude
				item.callout.content=this.name
				// item.callout.bgColor='#5398f6'
				// 	// item.iconPath=`../../static/lg_img/btn_location.png`
			})
			// console.log(this.covers)
		},
		methods:{
			markertap(e){
				console.log(5555);
				console.log(e); // 点击的marker的id
					console.log(e.markerTitle); // 点击的marker的title
					console.log(e.markerLatitude); // 点击的marker的纬度
					console.log(e.markerLongitude); // 点击的marker的经度
					console.log(e.markerAddress); // 点击的marker的地址
					console.log(e.markerCallout); // 点击的marker的callout
			},
			taps:function(e){
				console.log(e,'aaaa');
			}
		}
	}
</script>

<style lang="scss">

</style>
